import { useState, useMemo, useEffect } from "react";
import { NavBar, DatePicker } from "antd-mobile";
import classNames from "classnames";
import "./index.scss";
import _ from "lodash";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import DailyBill from "./components/DailyBill/index";
const Month = () => {
  // redux 总数据
  let billList = useSelector((state) => state.bill.billList);
  // 日历隐藏
  let [visible, setVisible] = useState(false);
  // 日历绑定的值
  let [value, setValue] = useState(new Date());
  // 当前月份组
  const [currentMonthList, setMonthList] = useState([]);
  //   当前选中月
  let curDate = useMemo(() => {
    return dayjs(value).format("YYYY-MM");
  }, [value]);

  // 月数据组
  let billListGroup = useMemo(() => {
    return _.groupBy(billList, (data) => dayjs(data.date).format("YYYY-MM"));
  }, [billList]);
  // 日数据组
  let billListGroupDay = useMemo(() => {
    let data =
      (currentMonthList &&
        _.groupBy(currentMonthList, (data) =>
          dayjs(data.date).format("YYYY-MM-DD")
        )) ||
      {};

    return { data, key: Object.keys(data) };
  }, [currentMonthList]);
  //当前月份 支出  /  收入  / 结余
  const monthResult = useMemo(() => {
    const pay = currentMonthList
      ?.filter((item) => item.type === "pay")
      .reduce((a, c) => a + c.money, 0);
    const income = currentMonthList
      ?.filter((item) => item.type === "income")
      .reduce((a, c) => a + c.money, 0);

    return {
      pay: pay || 0,
      income: income || 0,
      total: pay + income || 0,
    };
  }, [currentMonthList]);
  //  初始化数据
  useEffect(() => {
    billList.length && setMonthList(billListGroup[curDate]);
  }, [billList]);
  //当前月收入明细

  const close = () => {
    setVisible(false);
  };
  const onConfirm = (date) => {
    const formatDate = dayjs(date).format("YYYY-MM");
    close();
    setValue(date);
    setMonthList(billListGroup[formatDate] || []);
  };
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>

      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setVisible(true)}>
            <span className="text">{curDate}月账单</span>
            <span className={classNames("arrow", visible && "expand")}></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult?.pay?.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income?.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult?.total?.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}

          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={visible}
            max={new Date()}
            value={value}
            onCancel={close}
            onConfirm={onConfirm}
            onClose={close}
          />
        </div>
        {billListGroupDay?.key?.map((item) => {
          return (
            <DailyBill
              key={item}
              date={item}
              billList={billListGroupDay.data[item]}
            />
          );
        })}
      </div>
    </div>
  );
};
export default Month;
